import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import postcsspxtoviewport from 'postcss-px-to-viewport'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import compressPlugin from 'vite-plugin-compression'
// import { IconsResolver } from 'unplugin-vue-components/resolvers'
// import Icons from 'unplugin-icons/vite'
// import Inspect from 'vite-plugin-inspect'

// https://vite.dev/config/
export default defineConfig({
  base: './',
  plugins: [
    vue(),
    compressPlugin({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    }),
    vueDevTools(),
    AutoImport({
      resolvers: [
        ElementPlusResolver(), // 自动导入图标组件
        // 引入 IconsResolver
        // ...原有代码...
        // IconsResolver({
        //   prefix: 'Icon',
        // }),
      ],
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        // 自动注册图标组件
        // IconsResolver({
        //   enabledCollections: ['ep'],
        // }),
      ],
    }),
    // Icons({
    //   autoInstall: true,
    // }),

    // 首先导入 Inspect 插件
    // 然后在 plugins 数组中使用它
    // Inspect(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  server: {
    host: '0.0.0.0',
    port: 7000,
    // open: true,
    proxy: {
      '/api': {
        target: 'https://api.uomg.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          // 要转化的单位
          unitToConvert: 'px',
          // UI设计稿的大小
          //当文件名包含'tablet'时使用1024px宽度，
          // 包含'large-screen'时使用2560px宽度，默认使用1920px宽度
          // viewportWidth: (file) => {
          //   if (file.includes('tablet')) return 1920
          //   if (file.includes('large-screen')) return 2560
          //   return 1920 // 默认PC端尺寸
          // },
          viewportWidth: 1920,
          // 转换后的精度
          unitPrecision: 6,
          // 转换后的单位
          viewportUnit: 'vw',
          // 字体转换后的单位
          fontViewportUnit: 'vw',
          // 能转换的属性，*表示所有属性，!border表示border不转
          propList: ['*'],
          // 指定不转换为视窗单位的类名，
          selectorBlackList: ['ignore-'],
          // 最小转换的值，小于等于1不转
          minPixelValue: 1,
          // 是否在媒体查询的css代码中也进行转换，默认true
          mediaQuery: true,
          // 是否转换后直接更换属性值
          replace: true,
          // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
          exclude: [/node_modules/], // 明确排除node_modules
          // 包含那些文件或者特定文件
          include: [],
          // 是否处理横屏情况
          landscape: false,
        }),
      ],
    },
    // 新增预处理器配置
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/css/variables.scss" as *;`,
      },
    },
  },
})
